import React, { useEffect, useRef, useState } from "react";
import Konva from "konva";
import { Stage, Layer, Rect, Text, Image, Group } from "react-konva";
import useImage from "use-image";
import { EProp } from "./type";
import { Button, Tabs, InputNumber, ColorPicker, Slider, Select } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import {
  bgPicList,
  editorItemList,
  fontFamilyList,
  imgPicList,
  recommendSizeList,
  sourceList,
  textList,
  textSetList,
} from "./common";
import styles from "./index.less";

const Editor: React.FC<EProp> = ({ visible, hideVisible, imgUrl }: EProp) => {
  // Rect
  let [rectWidth, setRectWidth] = useState<number>(500);
  let [rectHeight, setRectHeight] = useState<number>(500);
  let [rectFill, setRectFill] = useState<any>(null);
  let [rectScaleX, setRectScaleX] = useState<number>(1);
  let [rectScaleY, setRectScaleY] = useState<number>(1);
  let [rectFillPatternImage, setRectFillPatternImage] = useState<any>(null);
  let [rectFilters, setRectFilters] = useState<any[]>([Konva.Filters.Blur]);
  let [rectBlurRadius, setRectBlurRadius] = useState<number>(0);
  let [rectFillPatternRepeat, setRectFillPatternRepeat] =
    useState<string>("repeat");
  let [rectFillPatternScaleX, setRectFillPatternScaleX] = useState<number>(1);
  let [rectFillPatternScaleY, setRectFillPatternScaleY] = useState<number>(1);
  let [rectFillPatternX, setRectFillPatternX] = useState<number>(0);
  let [rectFillPatternY, setRectFillPatternY] = useState<number>(0);

  // 图片
  const [images] = useImage(imgUrl);
  let [imageWidth, setImageWidth] = useState<number>(500);
  let [imageHeight, setImageHeight] = useState<number>(500);
  let [imageOpacity, setImageOpacity] = useState<number>(1);
  let [imageShadowColor, setImageShadowColor] =
    useState<string>("rgba(0,0,0,1)");
  let [imageShadowBlur, setImageShadowBlur] = useState<number>(10);
  let [imageShadowOpacity, setImageShadowOpacity] = useState<number>(0.5);
  let [imageShadowOffsetY, setImageShadowOffsetY] = useState<number>(0);
  let [imageShadowOffsetX, setImageShadowOffsetX] = useState<number>(0);
  let [imageFilters, setImageFilters] = useState<any[]>([Konva.Filters.Blur]);
  let [imageBlurRadius, setImageBlurRadius] = useState<number>(0);
  let [imageScaleX, setImageScaleX] = useState<number>(1);
  let [imageScaleY, setImageScaleY] = useState<number>(1);
  let [imageShadowEnabled, setImageShadowEnabled] = useState<boolean>(false);
  let [imageZIndex, setImageZIndex] = useState<number>(2);
  let [imageBorderSize, setImageBorderSize] = useState<number>(0);
  let [imageBorderColor, setImageBorderColor] = useState<string>("transparent");

  // 文字
  let [isSetText, setIsText] = useState<boolean>(true);
  // const useTextRef = useRef(null);
  let [fontList, setFontList] = useState<Array<any>>([]);
  let [text,setText] = useState<string>("Hello World");
  let [fontSize,setFontSize] = useState<number>(36);
  let [fontWeight,setFontWeight] = useState<number>(500);
  let [fontFamily,setFontFamily] = useState<string>("Arial");
  let [textFill,setTextFill] = useState<string>("#000000");
  let [textShadowColor,setTextShadowColor] = useState<string>("#000000");
  let [textShadowBlur,setTextShadowBlur] = useState<number>(3);
  let [textShadowOffsetX,setTextShadowOffsetX] = useState<number>(5);
  let [textShadowOffsetY,setTextShadowOffsetY] = useState<number>(5);
  let [textShadowOpacity,setTextShadowOpacity] = useState<number>(0.7);
  let [textX,setTextX] = useState<number>(0);
  let [textY,setTextY] = useState<number>(0);
  let [textAlign,setTextAlign] = useState<string>("left");
  let [textFilters,setTextFilters] = useState<any[]>([Konva.Filters.Blur]);
  let [textFontStyle,setTextFontStyle] = useState<string>("normal");
  let [textDecoration,setTextDecoration] = useState<string>("");
  let [textLineHeight,setTextLineHeight] = useState<number>(1);
  let [textShadowEnabled,setTextShadowEnabled] = useState<boolean>(false);
  let [textWidth,setTextWidth] = useState<number>(200);
  let [textHeight,setTextHeight] = useState<number>(40);
  let [textOffsetX,setTextOffsetX] = useState<number>(1);
  let [textLetterSpacing,setTextLetterSpacing] = useState<number>(0);
  let [textRotation,setTextRotation] = useState<number>(0);
  let [textZIndex,setTextZIndex] = useState<number>(3);

  const onChangeX = () => {};
  const onChangeY = () => {};

  const SizeContent = () => {
    return (
      <div className="w-56">
        <p>自定义尺寸</p>
        <InputNumber defaultValue={500} onChange={onChangeX} />
        <span>x</span>
        <InputNumber defaultValue={500} onChange={onChangeY} />
        <p>推荐尺寸</p>
        <div>
          {recommendSizeList.map((item) => (
            <div key={item.id} className="flex justify-start">
              <span className="inline-block mr-4 mb-4">{item.name}</span>
              <span>{`${item.size?.[0]}x${item.size?.[1]}${item.unit}`}</span>
            </div>
          ))}
        </div>
      </div>
    );
  };

  const BgContent = () => {
    return (
      <div className="w-56">
        <div>背景图</div>
        <div className="flex justify-between flex-wrap w-52">
          {bgPicList.map((item) => (
            <div key={item.id} className="w-16 h-16 mb-2">
              <img src={item.url} alt={item.name} className="w-full h-full" />
            </div>
          ))}
        </div>
        <div>不透明度</div>
        <Slider defaultValue={30} className="w-48" />
        <div>背景色</div>
        <ColorPicker defaultValue="#1677ff" size="large" showText />
        <div>不透明度</div>
        <Slider defaultValue={30} className="w-48" />
      </div>
    );
  };

  const TextContent = () => {
    return (
      <div className="w-56">
        <div>添加文字</div>
        <div>
          {textList.map((item) => (
            <Button key={item.id} type="primary" className="block mb-2">
              {item.name}
            </Button>
          ))}
        </div>
        <div>
          {isSetText && (
            <div>
              {textSetList.map((item) => (
                <div key={item.id}>
                  <FontStyle item={item} />
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  };

  const FontStyle = ({ item }: any) => {
    switch (item.id) {
      case 0:
        return <Fonts />;
      case 1:
        return <FontColor />;
      case 2:
        return <FontEffect />;
      case 3:
        return <FontFill />;
      case 4:
        return <FontStroke />;
      case 5:
        return <FontShape />;
      case 6:
        return <FontShadow />;
      case 7:
        return <FontAlpha />;
      case 8:
        return <FontSize />;
      default:
        return <FontPosition />;
    }
  };

  const SourceContent = () => {
    return (
      <div className="w-56">
        {sourceList.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    );
  };

  const ImgContent = () => {
    return (
      <div className="w-56 flex justify-start flex-wrap">
        {imgPicList.map((item) => (
          <div key={item.id} className="w-16 h-16 mb-2 mr-2">
            <img src={item.url} alt={item.name} className="w-full h-full" />
          </div>
        ))}
      </div>
    );
  };

  const EditorItemTab = ({ item }: any) => {
    switch (item.id) {
      case 0:
        return <SizeContent />;
      case 1:
        return <BgContent />;
      case 2:
        return <TextContent />;
      case 3:
        return <SourceContent />;
      default:
        return <ImgContent />;
    }
  };

  const Fonts = () => {
    return (
      <>
        <div>文字</div>
        <Select
          defaultValue="Arial"
          style={{ width: 120 }}
          onChange={handleFontChange}
          options={fontFamilyList}
        />
      </>
    );
  };

  const FontColor = () => {
    return <div>文字色</div>;
  };

  const FontEffect = () => {
    return <div>效果</div>;
  };

  const FontFill = () => {
    return <div>填充</div>;
  };

  const FontStroke = () => {
    return <div>描边</div>;
  };

  const FontShape = () => {
    return <div>变形</div>;
  };

  const FontShadow = () => {
    return <div>阴影</div>;
  };

  const FontAlpha = () => {
    return <div>不透明度</div>;
  };

  const FontSize = () => {
    return <div>尺寸</div>;
  };

  const FontPosition = () => {
    return <div>坐标</div>;
  };

  const handleFontChange = () => {};

  return (
    visible && (
      <div className="flex justify-start align-middle absolute bg-white top-11 z-10 h-full w-full">
        <div className="w-96">
          <Tabs
            tabPosition="left"
            items={editorItemList.map((item) => {
              return {
                label: item.name,
                key: `${item.id}`,
                children: <EditorItemTab item={item} />,
              };
            })}
          />
        </div>
        <div>
          <div className="flex justify-center ml-96">
            <Button icon={<CloseOutlined />} onClick={hideVisible} />
          </div>
          <div></div>
          <Stage width={window.innerWidth} height={window.innerHeight}>
            <Layer width={800} height={500}>
              <Rect
                width={rectWidth}
                height={rectHeight}
                fill={rectFill}
                scaleX={rectScaleX}
                scaleY={rectScaleY}
                fillPatternImage={rectFillPatternImage}
                id="rectShape"
                filters={rectFilters}
                blurRadius={rectBlurRadius}
                fillPatternRepeat={rectFillPatternRepeat}
                fillPatternScaleX={rectFillPatternScaleX}
                fillPatternScaleY={rectFillPatternScaleY}
                fillPatternX={rectFillPatternX}
                fillPatternY={rectFillPatternY}
                zIndex={1}
              />
              <Image
                width={imageWidth}
                height={imageHeight}
                image={images}
                opacity={imageOpacity}
                shadowColor={imageShadowColor}
                shadowBlur={imageShadowBlur}
                shadowOpacity={imageShadowOpacity}
                shadowOffsetY={imageShadowOffsetY}
                shadowOffsetX={imageShadowOffsetX}
                filters={imageFilters}
                blurRadius={imageBlurRadius}
                scaleX={imageScaleX}
                scaleY={imageScaleY}
                shadowEnabled={imageShadowEnabled}
                zIndex={imageZIndex}
                borderSize={imageBorderSize}
                borderColor={imageBorderColor}
              />
              <Group>
                {fontList.map((item, index) => (
                  <Text
                    key={item.id}
                    text={text}
                    fontSize={fontSize}
                    fontWeight={fontWeight}
                    fontFamily={fontFamily}
                    fill={textFill}
                    shadowColor={textShadowColor}
                    shadowBlur={textShadowBlur}
                    shadowOffsetX={textShadowOffsetX}
                    shadowOffsetY={textShadowOffsetY}
                    shadowOpacity={textShadowOpacity}
                    x={textX}
                    y={textY}
                    draggable={true}
                    align={textAlign}
                    filters={textFilters}
                    visible={true}
                    id={`textShape${item.id}`}
                    fontStyle={textFontStyle}
                    textDecoration={textDecoration}
                    lineHeight={textLineHeight}
                    shadowEnabled={textShadowEnabled}
                    width={textWidth}
                    height={textHeight}
                    offsetX={textOffsetX}
                    name={`textShape${item.id}`}
                    letterSpacing={textLetterSpacing}
                    wrap="word"
                    rotation={textRotation}
                    zIndex={textZIndex}
                  />
                ))}
              </Group>
            </Layer>
          </Stage>
        </div>
      </div>
    )
  );
};

export default Editor;
